<template>
  <div :class="classes">
    <div :class="barConClasses">
      <i
        :class="`${prefix}-bar`"
        v-once
        v-for="i in 8"
        :key="`trigger-${i}`"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "Trigger",
  props: {
    mode: String,
  },
  data() {
    return {
      prefix: "ivu-split-trigger",
      initOffset: 0,
    };
  },
  computed: {
    isVertical() {
      return this.mode === "vertical";
    },
    classes() {
      return [
        this.prefix,
        this.isVertical
          ? `${this.prefix}-vertical`
          : `${this.prefix}-horizontal`,
      ];
    },
    barConClasses() {
      return [
        `${this.prefix}-bar-con`,
        this.isVertical ? "vertical" : "horizontal",
      ];
    },
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>